<!--
 * @Descripttion: 客户管理列表页
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2019-12-06 10:04:32
 -->
<template>
  <div class="app-container paddingT50">
    <affix>
      <div class="paddingLR20 clearfix">
        <el-card shadow="never" class="oper-btn-card">
          <div class="clearfix">
            <el-form
              class="fl form-no-bottom"
              :inline="true"
              :model="searchData"
              label-position="left"
              label-width="80px"
              @keydown.enter.native="btnSearch"
            >
              <el-form-item>
                <el-input
                  v-model="searchData.keywords"
                  clearable
                  style="width: 360px"
                  placeholder="按编号,名称,联系人,电话..."
                >
                  <el-button slot="append" icon="el-icon-search" type="primary" :loading="btnLoading.search" @click="btnSearch()" />
                </el-input>
              </el-form-item>
            </el-form>
            <el-button class="fr" type="primary" @click="btnAddShop">新增门店</el-button>
          </div>
        </el-card>
      </div>
    </affix>
    <div>
      <vxe-grid
        ref="table"
        class="grid"
        border
        size="small"
        resizable
        highlight-hover-row
        :loading="tableLoading.store"
        :edit-config="{trigger: 'click', mode: 'row'}"
        :columns="columnsData"
        :data="tableData.store"
        @edit-closed="onEditClosed"
      />
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="pageInfo.rows"
        :page-sizes="[20,30,40]"
        :current-page.sync="pageInfo.page"
        :total="pageInfo.totalCount"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
    <el-dialog
      v-if="dialogVisible.save"
      title="新增门店"
      :visible.sync="dialogVisible.save"
      destroy-on-close
      append-to-body
    >
      <save-shop ref="saveShop" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible.save = false">取 消</el-button>
        <el-button type="primary" :loading="btnLoading.sure" @click="btnSureSaveData">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-if="dialogVisible.update"
      title="编辑门店"
      :visible.sync="dialogVisible.update"
      destroy-on-close
      append-to-body
    >
      <save-item ref="updateShop" :item-name="`门店`" :data="currentData" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible.update = false">取 消</el-button>
        <el-button type="primary" :loading="btnLoading.updateSure" @click="btnSureUpdateData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { listData, addData, updateData, delListData } from '@/api/store/shop.js'
import Affix from '@/components/Affix'
import SaveShop from './save-shop'
import SaveItem from './save-item'
import ViewShop from './view-shop'
import { getDelButton, getUpdateButton } from '@/components/Table/oper-btns.js'

export default {
  name: 'StoreList',
  filters: {
  },
  // eslint-disable-next-line vue/no-unused-components
  components: { Affix, SaveShop, ViewShop, SaveItem },
  mixins: [oftenuse],
  data() {
    return {
      searchData: {},
      dialogVisible: {
        save: false,
        update: false
      },
      optionsData: {
        state: [{ code: '0', name: '未付款' }, { code: '1', name: '已付款' }]
      },
      currentData: null,
      columnsData: [
        { title: '#', width: 30, type: 'expand',
          slots: {
            default: ({ row, seq }) => {
              const data = {
                props: {
                  data: row
                }
              }
              return [<ViewShop {...data}/>]
            }
          }
        },
        { title: '操作', width: 80,
          slots: {
            default: (params) => {
              const { row } = params
              const h = this.$createElement
              const delBtnNode = getDelButton(h, { on: { click: () => { this.btnDelData(row) } }})
              const updateBtnNode = getUpdateButton(h, { props: { type: 'primary' }, on: { click: (e) => { this.btnUpdateData(e, row) } }})
              const divNode = h('div', {
                attrs: {
                  class: 'table-oper-btns'
                }
              }, [updateBtnNode, delBtnNode])
              return [divNode]
            }
          }
        },
        { field: 'code', title: '编号', editRender: { name: 'ElInput' }, width: 150 },
        { field: 'name', title: '名称', editRender: { name: 'ElInput' }},
        { field: 'storeName', title: '管辖仓库' },
        { field: 'contacter', title: '联系人', editRender: { name: 'ElInput' }},
        { field: 'phone', title: '联系电话', editRender: { name: 'ElInput' }}
      ]
    }
  },
  watch: {
  },
  created() {
    this.getShopList()
  },
  methods: {
    btnAddShop() {
      this.dialogVisible.save = true
    },
    btnSureSaveData() {
      const shopComp = this.$refs.saveShop
      shopComp.valiData().then(_ => {
        const data = shopComp.getData()
        this.setBtnLoading('sure', true)
        this.saveShopStore(data).then(res => {
          if (res.data.flag) this.$notify.success({ title: '保存成功！' })
          this.setBtnLoading('sure', false)
        })
      })
    },
    btnSureUpdateData() {
      const updateShopComp = this.$refs.updateShop
      const data = updateShopComp.dataObj
      updateShopComp.handleValid('form').then(_ => {
        this.setBtnLoading('updateSure', true)
        this.updateShop(data).then(res => {
          this.setBtnLoading('updateSure', false)
        })
      })
    },
    btnSearch() {
      this.setBtnLoading('search', true)
      this.getShopList().then(res => {
        this.setBtnLoading('search', false)
      }).catch(err => {
        console.log(err)
        this.setBtnLoading('search', false)
      })
    },
    // table btns
    btnUpdateData(e, data) {
      this.currentData = data
      this.dialogVisible.update = true
    },
    btnDelData(row) {
      this.$confirm('确定要删除该门店吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delListShop([row.id])
      }).catch(() => {
      })
    },
    // api
    delListShop(idList) {
      delListData(idList).then(res => {
        const message = res.data.message
        if (!res.data.flag) return this.$notify.error({ title: '删除失败!', message: message })
        this.$notify.success({ title: '删除成功!' })
        this.getShopList()
      }).catch(err => {
        this.$notify.error({ title: '删除异常！', message: err.message })
      })
    },
    updateShop(shopObj) {
      return updateData(shopObj).then(res => {
        const message = res.data.message
        this.getShopList()
        if (!res.data.flag) {
          return this.$notify.error({ title: '保存失败!', message: message })
        }
        this.$notify.success({ title: '保存成功!' })
        this.$set(this.dialogVisible, 'update', false)
      }).catch(err => {
        this.$notify.error({ title: '保存异常！', message: err.message })
      })
    },
    saveShopStore(shopStoreObj) {
      return new Promise((resolve, reject) => {
        addData(shopStoreObj).then(res => {
          resolve(res)
          const message = res.data.message
          if (!res.data.flag) {
            this.getShopList()
            return this.$notify.error({ title: '保存失败!', message: message })
          }
          this.dialogVisible.save = false
        }).catch(err => {
          this.$notify.error({ title: '保存异常！', message: err.message })
          reject(err)
        })
      })
    },
    getShopList(params = { data: this.searchData, pageInfo: this.pageInfo }) {
      this.setTableLoading('store', true)
      return new Promise((resolve, reject) => {
        listData(params).then(res => {
          this.setTableLoading('store', false)
          if (res.data.flag) {
            this.setTableData('store', res.data.data)
            this.pageInfo = res.data.pageInfo
          }
          resolve(res)
        }).catch(err => {
          this.setTableLoading('store', false)
          reject(err)
        })
      })
    },
    // on
    onSelectionChange(selectionData) {
      this.setTableSelectionData('store', selectionData)
    },
    onSizeChange(val) {
      this.pageInfo.page = 1
      this.pageInfo.rows = val
      this.getShopList()
    },
    onEditClosed(params, val) {
      const { row } = params
      this.updateShop(row)
    },
    onCurrentChange(val) {
      this.pageInfo.page = val
      this.getShopList()
    }
  }
}
</script>
<style scoped>

</style>
